<%@ page import="java.util.List" %>
<%@ page import="com.qf.pojo.Catalog" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/18
  Time: 9:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物购站</title>
    <%--bootstrap样式--%>
    <link type="text/css" rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/static/css/index.css">

</head>
<body>
<%--jquery--%>
<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
<%--bootstrap js文件--%>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row lay1"><%--id="lay1"--%>
        <div class="col-md-3">陕西</div>
        <div class="col-md-1 log">你好，登录</div>
        <div class="col-md-1">免...</div>
        <div class="col-md-1">我的订单</div>
        <div class="col-md-1">我的订单</div>
        <div class="col-md-1">我的订单</div>
        <div class="col-md-1">我的订单</div>
        <div class="col-md-1">我的订单</div>
        <div class="col-md-1">我的订单</div>
        <div class="col-md-1">我的订单</div>
    </div>
    <div class="row lay2">
        <div class="col-md-2"><img src="/static/img/logo.png"/></div>
        <div class="col-md-9">
            <div class="row top">
                <div class="col-md-8">
                    <div class="col-md-12"></div>
                    <div class="col-md-1">1</div>
                    <div class="col-md-1">2</div>
                    <div class="col-md-1">3</div>
                    <div class="col-md-1">4</div>
                    <div class="col-md-1">5</div>
                    <div class="col-md-1">6</div>
                    <div class="col-md-1">7</div>
                </div>
                <div class="col-md-2"></div>
                <div class="col-md-2"></div>
            </div>
            <div class="row bottom">
                <div class="col-md-1">1</div>
                <div class="col-md-1">2</div>
                <div class="col-md-1">3</div>
                <div class="col-md-1">4</div>
                <div class="col-md-1">5</div>
                <div class="col-md-1">6</div>
                <div class="col-md-1">7</div>
                <div class="col-md-1">8</div>
                <div class="col-md-1">9</div>
                <div class="col-md-1">10</div>
            </div>
        </div>
    </div>

    <div class="row lay3">
        <%--第三层布局--%>
        <%--左:一级类别--%>
        <div class="col-md-2">
            <%
                //jsp中可以直接使用request
                Object obj = request.getAttribute("clist");
                List<Catalog> clist = (List<Catalog>) obj;
                for (int i = 1; i <= 18; i++) { //i表示行%>
            <div class="12 menu">
                <%
                    for (Catalog catalog : clist) {//取出所有一级类别
                        if (i == catalog.getLine()) {//根据行号判断该类别在第几行显示
                %>
                <span><%=catalog.getCname()%></span>
                <%
                        }
                    }
                %>

            </div>
            <%
                }
            %>
        </div>
        <%--中--%>
        <div class="col-md-8"></div>
        <%--右--%>
        <div class="col-md-2"></div>
    </div>
</div>
</body>
</html>
